<!--
 * @Date: 2025-12-01 16:17:06
 * @Description: 圆环饼图
 * @LastEditTime: 2025-12-03 11:26:59
-->
<template>
  <div class="charts" ref="chartRef"></div>
</template>

<script>
import echarts from 'echarts';
let myCharts = null;
export default {
  name: 'RingPieChart',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    myCharts = echarts.init(this.$refs.chartRef);
  },
  watch: {
    list: {
      handler(newVal) {
        if (!newVal || newVal.length === 0) return;
        this.dataList = newVal;
        myCharts.setOption(this.getOptions(this.dataList));
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getOptions(data) {
      const chartPieColors = [
        [
          {
            offset: 0,
            color: 'rgba(252, 238, 54, 1)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(255, 178, 2, 1)', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: 'rgba(67, 144, 255, 1)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(10, 0, 255, 1)', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: '#AE60FA', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#6D32C1', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: '#EFCE49', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#D79C12', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: '#FFB058', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#C56625', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: '#4ACC88', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#27A657', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: '#2C989E', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#27BCC9', // 100% 处的颜色
          },
        ],
        [
          {
            offset: 0,
            color: '#8A98FF', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#2B36A8', // 100% 处的颜色
          },
        ],
      ];

      let total = 0;
      let datas = [];

      if (data && data.length > 0) {
        data.forEach((item) => {
          total += item.memberNum;
          datas.push({
            name: item.gradelevelName,
            value: item.memberNum,
          });
        });
      } else {
        return;
      }

      const seriesData = datas.map((item, index) => {
        return {
          value: item.value,
          name: item.name,
          itemStyle: {
            borderWidth: 0,
            borderColor: '#182037',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops:
                chartPieColors[
                index > 8 ? Math.floor(Math.random() * 8 + 1) : index
                ],
              global: false, // 缺省为 false
            },
          },
        };
      });
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} ({d}%)',
        },
        grid: {
          bottom: 150,
          left: 100,
          right: '10%',
        },
        legend: {
          orient: 'vertical',
          type: 'scroll',
          right: 50,
          top: 'middle',
          icon: 'rect',
          itemGap: 10,
          itemWidth: 8, // 图例项的宽度
          itemHeight: 8, // 图例项的高度
          textStyle: {
            color: '#A1B5EB',
            fontSize: 14,
          },
          data:
            datas &&
            datas.filter((item) => {
              return item.name;
            }),
        },
        title: [
          {
            text: total,
            subtext: '总数',
            textStyle: {
              fontSize: 30,
              color: '#fff',
            },
            subtextStyle: {
              fontSize: 13,
              fontWeight: 500,
              color: '#fff',
            },
            textAlign: 'center',
            x: '33.5%',
            y: '42%',
          },
        ],
        series: [
          {
            name: '',
            type: 'pie',
            center: ['35%', '54%'],
            radius: ['58%', '75%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold',
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: seriesData,
          },
          {
            type: 'pie',
            center: ['35%', '54%'],
            radius: ['99', '100'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: '#6178FF',
              },
            },
            data: [100],
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
          },
        ],
      };
    },
  },
};
</script>

<style scoped lang="scss">
.charts {
  width: 100%;
  height: 100%;
}
</style>
